<template>
  <uni-popup ref="mealMate" type="bottom" zindex >
  			<view class="mealMate-con">
  				<view class="mate-title flex justify-between align-center">
  					<text>请设置自动约餐</text>
  					<text>2024-06-15开始</text>
  				</view>
  				<view class="meal-drop">
  					<view class="dizhi-bg">
  						<view class="textdizhi">送餐地址</view>
  					</view>
  					<view class="dizhi-con"
  						@click="mnavTo('/pages/others/addressList/addressList?source=creatOrder' + '&adressInfo=' + userStore.curSelecAdress.naddress_id )">
  						<block v-if="userStore.curSelecAdress.adrs">
  							<view class="flex justify-between align-center marbom">
  								<text class="dzhi-font">
  									{{ userStore.curSelecAdress.adrs }}
  								</text>
  								<text class="fcon-Vector mores_icons" style="margin-right: -10rpx;"></text>
  							</view>
  							<view class="dzhi-font99">
  								<text>{{userStore.curSelecAdress.vname}}</text>
  								<text>{{plusXing(userStore.curSelecAdress.vphone,3,4) }}</text>
  							</view>
  						</block>
  					</view>
  				</view>
  				<view class="meal-drop">
  					<view class="dizhi-bg">
  						<view class="textdizhi">约餐方式</view>
  					</view>
  					<view class="set_meals flex  align-center flex-wrap">
  						<view class="flex set_meals_li align-center flex-direction justify-center"
  							v-for="(item,index) in mealsList" :class="{hoverSet : item.id == mealsClass}"
  							@click="tapItemSelecMeal(item,index)" :key="index">
  							<text class="meals_font"
  								:class="{mealsfonthover:item.id == mealsClass}">{{ item.name }}</text>
  							<text class="text-mels" :class="{textfonthover:item.id == mealsClass}">{{item.text}}</text>
  							<text class="posi-icon flex" v-if="item.id == mealsClass">
  								<text class="posi-check fcon-xuanzhong"></text>
  							</text>
  							<!-- <text class="csico text-xxl"
            			:class="index ==  mealsClass ? '.cuIcon-roundcheckfill' :'cuIcon-round'"></text> -->
  						</view>
  					</view>
  				</view>
  				<view class="titps-text">
  					如需变更送餐时间或地址，请在送餐前2小时完成修改。
  				</view>
  				<view class="titps-btn flex align-center justify-center" @click="hidePop('mealMate')">
  					确定
  				</view>
  			</view>
  </uni-popup>
  
  <uni-popup ref="deliveryTime" type="bottom" zindex @maskClick="maskClick">
  	<view class="comBotBx flex flex-direction" @click.stop="closeall">
  		<view class="mtitle text-xll  prpo-w padding-lr">
  			请设置配送时段
  		</view>
  		<view class="bg-white flex-sub dlmain nav padding-lr prpo-w margin-bottom-lg">
  			<view class="flex flex-wrap">
  				<view v-for="(item,index) in mealData" :key="index"
  					class="cu-items  text-lg point flex flex-direction"
  					:class="index==tabClass?'text-ngreen curHover':''" @click.stop="selecyucan(item,index)"
  					:data-id="index">
  					<!-- <view class="rounded-bottom-triangle"></view> -->
  					{{item.name}}
  					<text class="margin-top-xs" v-if="item.setTime">{{ item.setTime}}</text>
  					<view class="seleIcon">
  						<view class="triangle" :class="index==tabClass?'seleBgActive':''"></view>
  						<text class="checkmark" v-if="index == tabClass"></text>
  						<!-- <text v-if="index==tabClass" class="fcon-xuanzhong"></text> -->
  					</view>
  					<!-- <text class="fcon-a-dsanjiao" @click.stop="selecTab(item,index)"></text> -->
  					<view class="yytips flex flex-direction" v-if="item.state">
  						<view class="yytips_li flex justify-between"
  							@click.stop="selecTips(list,item.time,item)" v-for="(list,listIndex) in item.time"
  							:key="listIndex">
  							<text class="fongStyle">{{list.text}}</text>
  							<text class=" text-xll"
  								:class="list.flag?'cuIcon-roundcheckfill':'cuIcon-round'"></text>
  							<!-- <text class="posi-check" :class="list.flag ? 'fcon-xuanzhong' : ''"></text> -->
  						</view>
  					</view>
  				</view>
  			</view>
  		</view>
  		<view class="padding-lr zdypadding flex justify-between flex-direction">
  			<view class="zm_half bg" @click="determine">
  				确定
  			</view>
  		</view>
  	</view>
  </uni-popup>
  <setAutoMeal ref="pop1"></setAutoMeal>
  
</template>

<script setup lang="ts">
	import { ref, computed,onMounted } from 'vue'
  import { mnavTo, showLoading, hideLoading, plusXing, getSystemPhoneX } from '@/utils/helper';
  import { useUserStore } from '@/stores/commonStore';
  import setAutoMeal from '@/components/setAutoMeal/setAutoMeal.vue'
  const userStore = useUserStore();
  const emit = defineEmits(["confirm"])
  const mealMate = ref(null)
  const pop1 = ref(null)
  const switchFlag = ref(false)
  const statue = ref(null)
  const mealsClass = ref('1178') //设置自动约餐切换
  const tabClass = ref(0)//中餐晚餐
  const timeFlag = ref(false)
  const deliveryTime = ref(null)
  const lunchName = ref('')  //配送时段  午
  const dinnerName = ref('') //配送时段  晚
  const breakfastName = ref('') //配送时段  时间
  const zhong = ref('') //中
  const wan = ref('') //中
  const meal = ref('') //确定约餐时段
  
  const mealsList = ref([
  	{
  		name: '天天送',//1178天天送，1179工作日送,1180周末送，1181我不需要,1182自定义
  		text: '每天配送',
  		id: '1178'
  	},
  	{
  		name: '工作日送',
  		text: '周一到周五配送',
  		id: '1179'
  	},
  	{
  		name: '周末送',
  		text: '周六日配送',
  		id: '1180'
  	},
  	{
  		name: '我手动约餐',
  		text: '系统不自动约餐',
  		id: '1181'
  	},
  	{
  		name: '自定义',
  		text: '我时间较灵活',
  		id: '1182'
  	}
  ])
  
  //配送时间段
  const mealData = ref([
  	// {
  	// 	name: '早餐',
  	// 	state: false,
  	// 	setTime: '',
  	// 	type: 'breakfast',
  	// 	time: [
  	// 		{
  	// 			text: '6:30-7:00',
  	// 			flag: false
  	// 		},
  	// 		{
  	// 			text: '7:00-7:30',
  	// 			flag: false
  	// 		},
  	// 		{
  	// 			text: '7:30-8:30',
  	// 			flag: false
  	// 		}
  	// 	]
  	// },
  	{
  		name: '午餐',
  		state: false,
  		setTime: '',
  		type: 'lunch',
  		time: [
  			{
  				text: '11:30-12:30',
  				flag: true
  			},
  			{
  				text: '12:30-13:30',
  				flag: false
  			},
  			{
  				text: '13:00-14:00',
  				flag: false
  			}
  		]
  	},
  	{
  		name: '晚餐',
  		state: false,
  		setTime: '',
  		type: 'dinner',
  		time: [
  			{
  				text: '17:30-18:00',
  				flag: false
  			},
  			{
  				text: '18:00-19:00',
  				flag: false
  			},
  			{
  				text: '18:30-19:30',
  				flag: false
  			}
  		]
  	}
  ])
  const load = () => {
    const firstMeal = mealData.value[0];
    firstMeal.setTime = firstMeal.time[0].text;
  }
  const open = () => {
  	mealMate.value.open()
  }
  
  const close = () => {
  	mealMate.value.close()
  }
  
  const tapSure = () => {
    emit("confirm", { statue: switchFlag.value })
    close()
  }
  
  const changeSwitch = (e) => {
    switchFlag.value = e.detail
    console.log(e.detail,'---------------------',switchFlag.value)
  }
  
  const selecyucan = (item : any, idnex : any) => {
  	tabClass.value = idnex
  	mealData.value.forEach((i : any) => {
  		i.state = i === item ? !i.state : false; // 仅切换当前项的状态，其它项关闭
  	})
  }
  
  //选泽具体约餐时间区段
  const selecTips = (list : any, data : any, fatherItem : any) => {
  	// fatherItem.setTime = list.text
  	if (list.flag) {
  		list.flag = false
  		fatherItem.setTime = "";
  	} else {
  		data.forEach((item : any) => {
  			item.flag = false
  		})
  		list.flag = true
  		fatherItem.setTime = list.text; // 赋值为当前选中项的文本
  	}
  	setTimeout(() => {
  		mealData.value.forEach((i : any) => {
  			i.state = false;
  		});
  	}, 60);
  }
  
  //确定约餐时间 回调约餐时间
  const determine = () => {
  	let hasLunch = false;
  	let hasDinner = false;
  	// let hasbreakfast = false;
  	mealData.value.forEach(v => {
  		if (v.type === "lunch") {
  			const hasAvailableTime = v.time.some(h => h.flag);
  			console.log(hasAvailableTime, 'hasAvailableTime----------------')
  			if (hasAvailableTime) {
  				hasLunch = true; // 标记午餐存在
  				lunchName.value = v.setTime; // 记录午餐时间
  			} else {
  				hasLunch = false;
  				lunchName.value = '';
  				console.log('午餐已全部取消');
  			}
  		} else if (v.type === "dinner") {
  			const hasAvailableTime = v.time.some(h => h.flag); // 如果有时间段的 flag 为 true
  			if (hasAvailableTime) {
  				hasDinner = true; // 标记晚餐存在
  				dinnerName.value = v.setTime; // 记录晚餐时间
  			} else {
  				hasDinner = false
  				dinnerName.value = ''
  				console.log('晚餐已全部取消');
  			}
  		}
  	});
  	// 根据标记设置 item.text
  	if (hasLunch && hasDinner) {
  		meal.value = "午餐 + 晚餐"
  		zhong.value = "中"
  		wan.value = "晚"
  		timeFlag.value = false
  	} else if (hasLunch) {
  		meal.value = "午餐"
  		zhong.value = '中'
  		timeFlag.value = false
  	} else if (hasDinner) {
  		meal.value = "晚餐"
  		wan.value = '晚'
  		timeFlag.value = false
  	} else {
  		meal.value = ""
  		zhong.value = ""
  		wan.value = ""
  		timeFlag.value = true
  	}
    emit("confirm", { statue: meal.value})
    mealsList.value.forEach(item => {
    	item.text = item.id == mealsClass.value ? meal.value : '';
    });
  	deliveryTime.value.close()
  }
  
  const closeall = () => {
  	mealData.value.forEach((item : any) => {
  		item.state = false
  	})
  }
  
  const tapItemSelecMeal = (item : any, index : any) => {
    if(!item.setTime){
      load()
    }
  	mealsClass.value = item.id;
  	if (item.id == '1182') {
  		showPop('pop1') //设置自动约餐
  		updateMealText(item.id)
  	} else if (item.id == '1181') {
  		updateMealText(item.id)
  	} else {
  		if (!item.text) {
  			let firstElementProcessed = false;
  			//重新赋值
  			tabClass.value = 0
  			mealData.value.forEach(v => {
  				console.log(v.setTime, timeFlag.value, ' v.setTim =-------------------------------------------')
  				v.state = false
  				v.setTime = v.time[0].text
  				if (!firstElementProcessed) {
  					v.setTime = v.time.length > 0 ? v.time[0].text : "";
  					firstElementProcessed = true;
  				} else {
  					v.setTime = "";
  				}
  				if (v.type === "lunch") {
  					v.time.forEach(h => h.flag = false);
  					v.time[0].flag = true; // lunch 类型第一个元素的 flag 设置为 true
  				} else if (v.type === "dinner") {
  					v.time.forEach(h => h.flag = false); // 将所有 dinner 的 flag 设置为 false
  				}
  			})
  		}
  		showPop('deliveryTime')
  	}
  }
  //配送时段遮罩层触发
  const maskClick = (e) => {
  	updateMealText(mealsClass.value)
  }

  //配送时段文案重置
  const updateMealText = (targetId : any) => {
  	mealsList.value.forEach(item => {
  		if (item.id === targetId) {
  			item.text = "";
  		} else {
  			// 恢复其他项的原有值 1178天天送，1179工作日送,1180周末送，1181我不需要,1182自定义
  			switch (item.id) {
  				case '1178':
  					item.text = '每天配送';
  					break;
  				case '1179':
  					item.text = '周一到周五配送';
  					break;
  				case '1180':
  					item.text = '周六日配送';
  					break;
  				case '1181':
  					item.text = '系统不自动约餐';
  					break;
  				case '1182':
  					item.text = '我时间较灵活';
  					break;
  				default:
  					item.text = ''; // 其他情况可根据需求处理
  			}
  		}
  	});
  };
  
  const showPop = (source : string, item : any = {}) => {
  	console.log('showPop', item)
  	switch (source) {
  		case 'mealMate':
  			mealMate.value?.open()
  			break;
      case 'pop1':
      	pop1.value?.open()
      	break;
      case 'deliveryTime':
      	deliveryTime.value?.open()
      	break;
  		default:
  			break;
  	}
  }
  const hidePop = (source : string) => {
  	switch (source) {
  		case 'mealMate':
  			mealMate.value?.close()
  			break;
      case 'pop1':
      	pop1.value?.close()
      	break;
      case 'deliveryTime':
      	deliveryTime.value?.close()
      	break;
  		default:deliveryTime
  			break;
  	}
  }
  
  defineExpose({ open, close})
</script>

<style scoped lang="scss">
  // 设置自动约餐弹窗
  .mealMate-con {
  	min-height: 1010.134rpx;
  	max-height: 96vh;
  	border-radius: 20rpx 20rpx 0 0;
  	background: #F3F3F3;
  	padding: 0 26rpx;
  
  	.titps-text {
  		color: #999;
  		font-size: 28rpx;
  		margin: 20rpx auto;
  		font-style: normal;
  		font-weight: 400;
  	}
  
  	.titps-btn {
  		width: 704.66rpx;
  		height: 88rpx;
  		color: #FFF;
  		font-size: 32rpx;
  		font-weight: 400;
  		border-radius: 38rpx;
  		background: #53A87F;
  	}
  
  	.meal-drop {
  		border-radius: 20rpx;
  		background: #FFF;
  		box-shadow: 0px 2px 10px 0px rgba(0, 0, 0, 0.10);
  		margin-bottom: 34rpx;
  
  		.set_meals {
  			padding: 0rpx 25rpx 30rpx 25rpx;
  
  			.set_meals_li {
  				width: 204rpx;
  				height: 124rpx;
  				flex-shrink: 0;
  				background: #fff;
  				border-radius: 10rpx;
  				box-shadow: 0px 4px 40px 0px rgba(0, 0, 0, 0.08);
  				padding: 0rpx 17rpx;
  				margin-right: 19rpx;
  				margin-bottom: 30rpx;
  				border: 1px solid #fff;
  				box-sizing: border-box;
  				position: relative;
  			}
  
  			.posi-icon {
  				position: absolute;
  				bottom: 0;
  				right: -1px;
  				border-radius: 10rpx 0px;
  				border: 1px solid #53A87F;
  				background: #53A87F;
  				width: 30.363rpx;
  				height: 26.254rpx;
  				padding-left: 5rpx;
  
  				.posi-check {
  					display: block;
  					margin-top: 5rpx;
  					font-size: 15rpx;
  					color: #fff;
  				}
  			}
  
  			.meals_font {
  				color: #333;
  				font-size: 32rpx !important;
  				font-weight: 400;
  			}
  
  			.mealsfonthover {
  				color: #53A87F !important;
  				font-weight: 700 !important;
  			}
  
  			.textfonthover {
  				color: #53A87F !important;
  			}
  
  			.text-mels {
  				color: rgba(153, 153, 153, 0.70);
  				font-size: 24rpx;
  				font-weight: 400;
  				margin-top: 8rpx;
  			}
  
  			.set_meals_li:nth-child(3n) {
  				margin-right: 0rpx;
  			}
  
  			.hoverSet {
  				background-image: url('https://cdn-static.yekjx.com/food/ico/images/crod_bg01.png');
  				background-size: cover;
  				background-repeat: no-repeat;
  				border: 1px solid #53A87F !important;
  			}
  
  			.meals_font {
  				color: #333;
  				font-family: "Microsoft YaHei UI";
  				font-size: 30rpx;
  				font-weight: 400;
  			}
  
  			.csico {
  				margin-left: 10rpx;
  			}
  		}
  
  		.dizhi-bg {
  			padding: 14rpx 0 0 20rpx;
  			height: 102rpx;
  			border-radius: 20rpx 20rpx 0 0;
  			background: linear-gradient(180deg, #E4FEEE 50%, #FFF 93.61%);
  			color: #333;
  			font-size: 32rpx;
  			font-weight: 400;
  
  			.textdizhi {
  				position: relative;
  				padding-left: 30rpx;
  
  				&:before {
  					content: '';
  					width: 6rpx;
  					height: 80%;
  					background-color: #53A87F;
  					position: absolute;
  					left: 0;
  					top: 50%;
  					transform: translateY(-50%);
  				}
  			}
  		}
  
  		.dizhi-con {
  			padding: 0 26rpx 20rpx 20rpx;
  
  			.dzhi-font {
  				color: #333;
  				font-size: 32rpx;
  				font-weight: 400;
  			}
  
  			.dzhi-font99 {
  				color: #999;
  				font-size: 28rpx;
  				font-weight: 400;
  			}
  
  			.marbom {
  				margin-bottom: 10rpx;
  			}
  		}
  	}
  
  	.mate-title {
  		height: 134rpx;
  
  		text {
  			&:last-child {
  				color: #999;
  				font-size: 32rpx;
  				font-weight: 400;
  			}
  
  			&:first-child {
  				color: #333;
  				font-size: 40rpx;
  				font-weight: 700;
  			}
  		}
  	}
  }
  .comBotBx {
  	min-height: 702rpx;
  	max-height: 96vh;
  	background-color: #fff !important;
    .nav .cu-items.curHover {
    	position: relative;
    }
    
    .nav .cu-items {
    	width: 329rpx;
    	height: 130rpx;
    	padding-left: 36rpx;
    	padding-top: 20rpx;
    	// border-bottom: 4rpx solid #F5F5F5;
    	position: relative;
    	border-radius: 5px;
    	background: #F7F7F7;
    	margin-right: 34rpx;
    	margin-bottom: 30rpx;
    	position: relative;
    
    	&:nth-child(2n) {
    		margin-right: 0;
    	}
    }
    
    .nav .cu-items.curHover {
    	// border-bottom: 6rpx solid;
    	position: relative;
    }
  	.seleIcon {
  		width: 36rpx;
  		height: 36rpx;
  		position: absolute;
  		right: 5rpx;
  		bottom: 5rpx;
  
  		.seleBgActive {
  			border-bottom: 30rpx solid #53A87F !important;
  		}
  
  		.triangle {
  			width: 0;
  			height: 0;
  			border-left: 30rpx solid transparent;
  			border-bottom: 30rpx solid #D3D3D3;
  			position: absolute;
  		}
  
  		.checkmark {
  			position: absolute;
  			top: 8rpx;
  			left: 14rpx;
  			width: 12rpx;
  			height: 24rpx;
  			border: solid #fff;
  			border-width: 0 4rpx 4rpx 0;
  			transform: rotate(45deg) scale(0.6);
  		}
  
  		.color33 {
  			color: #333;
  		}
  
  		.fcon-xuanzhong {
  			color: #fff;
  			position: absolute;
  			right: 10rpx;
  			top: -8rpx;
  			transform: rotate(-5deg);
  
  			&:before {
  				font-size: 9rpx !important;
  			}
  		}
  	}
  
  	.mtitle {
  		color: #333;
  		font-size: 40rpx;
  		font-weight: 700;
  		padding: 32rpx 30rpx;
  	}
  
  	.marbittom {
  		margin-bottom: 40rpx;
  	}
  
  	.yytips {
  		position: absolute;
  		width: 100%;
  		height: 324.78rpx;
  		flex-shrink: 0;
  		z-index: 999;
  		bottom: -345rpx;
  		left: 0rpx;
  		background-color: #fff;
  		border-radius: 20rpx;
  		box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.1);
  
  		.yytips_li {
  			border-bottom: 1px solid #f2f2f2;
  			padding: 0 20rpx;
  			height: 106rpx;
  			align-items: center;
  
  			.fongStyle {
  				color: #333;
  				font-family: "Microsoft YaHei UI";
  				font-size: 16px;
  				font-style: normal;
  				font-weight: 400;
  				line-height: normal;
  			}
  		}
  
  		.yytips_li:last-child {
  			border-bottom: none;
  		}
  	}
  
  	.cuIcon-round {
  		color: #999;
  	}
  
  	.cuIcon-roundcheckfill {
  		color: $base-color;
  	}
  
  	.zdypadding {
  		padding-top: 20rpx;
  		padding-bottom: 40rpx;
  	}
  
  	.zm_half {
  		width: 704.664rpx;
  		font-size: 32rpx;
  		text-align: center;
  		height: 88rpx;
  		line-height: 89rpx;
  		// box-shadow: 0px 10px 40px rgba(76, 162, 123, 0.26);
  		border-radius: 16rpx;
  		cursor: pointer;
  		background: #fff;
  		color: #999;
  		border: 1px solid #999;
  		// margin-top: 350rpx;
  
  		&.bg {
  			color: #fff;
  			background: $view-act;
  		}
  	}
  }
  .dlmain{
	  min-height: 320rpx;
	  max-height: 64vh;
  }
</style>